<!-- 饼状图（Pie chart） -->
<template>
    <div>
        <div :ref="'chart-pie-' + keyword" :style="{width: forceFit?'100%':width+'px',height: height+'px'}"></div>
        <div v-if="data.length<=0" style="margin-top: -5px;text-align: center;color: #CCCCCC;">
            <span style="font-size: 12px;">{{noDataTxt}}</span>
        </div>
    </div>
</template>

<script>
    import '../../../js/chartTheme/shine.js'
    import '../../../js/chartTheme/macarons.js'

    export default {
        data() {
            return {
                chart: null,
                data: [],
                options: {},
                title: {
                    text: '',
                    subtext: ''
                }
            }
        },
        props: {
            keyword: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            param: {
                type: Object,
                default() {
                    return {};
                }
            },
            cols: {
                type: Array,
                default() {
                    return ['name', 'value']
                }
            },
            toolbox: {
                type: Array,
                default() {
                    return ['saveAsImage']
                }
            },
            forceFit: {
                type: Boolean,
                default: true
            },
            height: {
                type: Number,
                default: 200
            },
            width: {
                type: Number,
                default: 200
            },
            plotCfg: {
                type: Object,
                default() {
                    return {}
                }
            },
            legends: {
                type: Array,
                default() {
                    return []
                }
            },
            noDataTxt: {
                type: String,
                default: '没有可展示的数据'
            },
            titlePosition: {
                type: String,
                default: "center"
            },
            series: {
                type: Array,
                default() {
                    return []
                }
            },
            setting: {
                type: Object,
                default() {
                    return {}
                }
            },
            legendPosition: {
                type: Object,
                default() {
                    return {
                        right: 40,
                        top: 10
                    }
                }
            }
        },
        methods: {
            init() {
                this.chart = this.EChart.init(this.$refs[`chart-pie-${this.keyword}`], this.$store.state.chartTheme);
                this.options = {
                    title: {
                        text: this.title.text,
                        subtext: this.title.subtext,
                        left: this.titlePosition
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a}<br/>{b}:{c}({d}%)"
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: this.toolbox.indexOf('dataView') > -1, readOnly: false},
                            restore: {show: this.toolbox.indexOf('restore') > -1},
                            saveAsImage: {show: this.toolbox.indexOf('saveAsImage') > -1, backgroundColor: '#fff'}
                        }
                    },
                    legend: {
                        type: "scroll",
                        orient: 'horizontal',
                        data: this.legends,
                        ...this.legendPosition
                    },
                    series: this.series
                }
            },
            render() {
                if (!this.chart) {
                    this.init();
                }
                this.chart.showLoading();
                app.ajax.get(this.url, this.param, (res) => {
                    if (res.s === 0) {
                        this.data = res.data;
                        this.fillChart(res.data);
                    } else {
                        this.$Message.error('数据加载失败：' + res.msg);
                    }
                    this.chart.hideLoading();
                }, () => {
                    this.chart.hideLoading();
                });
            },
            fillChart(data) {
                if (this.title.text === '') {
                    Object.assign(this.options['title'], {text: data.name});
                }
                this.options.series = [{
                    name: data.name ? data.name : this.name,
                    type: 'pie',
                    radius: this.setting.radius ? this.setting.radius : [0, '70%'],
                    data: data.data
                }]
                if (data.columns.length > 0) {
                    Object.assign(this.options['legend'], {
                        data: data.data.map(row => {
                            return row.name
                        })
                    });
                }
                if (this.animate) {
                    let animate = {
                        animationDelay: function (idx) { //动画
                            // 越往后的数据延迟越大
                            return idx * 100;
                        },
                        animationDurationUpdate: function (idx) { //数据跟新时执行
                            return idx * 100;
                        },
                        animationDelayUpdate: function (idx) {
                            return idx * 100
                        },
                        animationEasing: 'elasticOut',
                        animationEasingUpdate: 'elasticOut'
                    }
                    Object.assign(this.options, animate);
                }
                this.chart.setOption(this.options, true);
            }
        }
    }
</script>
